body{
    background-color: white;
}
.header-box{
    width: 100%;
    height: 50px;
    background-color: #192537;
    // position: relative;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    .header{
        // 
        width: 1098px;
        height: 50px;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
        padding-top: 18px;
        img{
            height: 15px;
        }
        
    }
    .nav{
        width: 100%;
        height: 50px;
        background-color: rgba(0,14,34,0.2);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2;
        ul{
            width: 330px;
            height: 30px;
            line-height: 50px;
            text-align: center;
            display: flex;
            justify-content: space-around;
            margin: 0 auto;
            font-weight: 300;
        }
        a{
            color:white;
            font-size: 12px;
        }
    }
}
.banner-box{
    margin-top: 50px;
    width: 100%;
    height: 350px;
    background: url("../img/login_banner.jpg") no-repeat;
    background-size: cover;
    background-position: 50%;
    position: relative;
    .banner{
        width: 332px;
        height: 120px;
        position: absolute;
        top: 30%;
        right: 20%;
        text-align: center;
        color: white;
        font-weight: 300;
        p:nth-child(1){
            font-size: 14px;
            margin-bottom: 10px;
        }
        p:nth-child(2){
            font-size: 30px;
            margin-bottom: 10px;
        }
        p:nth-child(3){
            font-size: 12px;
        }

    }
}
form{
    width:400px;
    overflow: hidden;
    // height: 688px;
    margin: 40px auto;
    // text-align: center;
    font-weight: 300;
    p{
        font-size: 14px;
        margin-bottom: 5px;
        color: #3f4554;

    }
    input,select{
        width: 300px;
        height: 40px;
        margin-bottom: 10px;
        border: 0;
        border: 1px solid #dddddd;
        padding-left: 10px;
    }
    &>.tips{
        display: block;
        width: 300px;
        height: 20px;
        font-weight: 500px;
        font-size: 14px;
        color: #d80000;
        
    }
    .tipsRed{
        box-sizing: border-box;
        border-bottom: 3px solid #d80000;
    }
    .tipsBlue{
        box-sizing: border-box;
        border-bottom: 3px solid #007947;
    }
    // ::-webkit-input-placeholder {
    //     color: #ccc;
    //     text-indent: 1em;
    //     font-weight: 400;
    // }
    
    // /* Firefox 4-18 */
    // :-moz-placeholder {
    //     color: #ccc;
    //     text-indent: 1em;
    //     font-weight: 400;
    // }
    
    // /* Firefox 19-50 */
    // ::-moz-placeholder {
    //     color: #ccc;
    //     text-indent: 1em;
    //     font-weight: 400;
    // }
    
    // /* - Internet Explorer 10–11
    //    - Internet Explorer Mobile 10-11 */
    // :-ms-input-placeholder {
    //     color: #ccc !important;
    //     text-indent: 1em !important;
    //     font-weight: 400 !important;
    // }
    
    // /* Edge (also supports ::-webkit-input-placeholder) */
    // ::-ms-input-placeholder {
    //     color: #ccc;
    //     text-indent: 1em;
    //     font-weight: 400;
    // }
    
    // /* CSS Working Draft */
    // ::placeholder {
    //     color: #ccc;
    //     text-indent: 1em;
    //     font-weight: 400;
    // }
    
    
    // input::placeholder{
    //     color: #dddddd;
        
    // }
    .yz{
        width: 400px;
        height: 65px;
        position: relative;
        .mc{
            width: 200px;
            height: 40px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            opacity: 0.1;
        }
        .yzm{
            width: 200px;
            height: 40px;
            float: left;
            margin-right: 10px;
        }
        a{
            display: block;
            width: 80px;
            height: 40px;
            color: black;
            float: left;
            box-sizing: border-box;
            border: 1px solid #dddddd;
            text-align: center;
            line-height: 38px;
            letter-spacing: 1px;
            font-weight: 400;
        }
    }
    
   
    .agree{
        width: 400px;
        height: 40px;
        span{
            display: block;
            width: 15px;
            height: 15px;
            box-sizing: border-box;
            border: 1px solid #dddddd;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            line-height: 15px;
        }
        p{
            font-size: 12px;
            float: left;
        }
        a{
          
            color: black;
            float: left;
            text-decoration: underline;
        }
    }
    .random{
        width: 200px;
        height: 20px;
        font-size: 12px;
        color: orange;
        margin-bottom: 10px;
        margin-top: 10px;

    }
   .sign{
       width: 300px;
       height: 40px;
       background-color: #111820;
       text-align: center;
       line-height: 40px;
       color: #c69f42;
       font-size: 12px;
       margin-bottom: 20px;
       cursor: pointer;
      
   }
   .msg{
       width: 300px;
       height: 40px;
       text-align: right;
       a{
           color: black;
        text-decoration: underline;
       }
   }
   .line{
       width: 300px;
       height: 1px;
       box-sizing: border-box;
       border-bottom: 1px solid #dddddd;
   }
   .type{
       width: 300px;
      text-align: center;
      padding: 20px;
      p{
          span{
              font-size: 30px;
              margin-right: 10px;
              color: black;
          }
      }
   }
   
}
.botton-box{
    width: 100%;
    height: 115px;
    background-color: #111820;
    .botton{
        width: 1098px;
        height: 115px;
        margin: 0 auto;
        position: relative;
        .helpMsg{
            position:absolute ;
            right: 40%;
            top: 30%;
            ul{
                display: flex;
                li{
                    a{
                       color: #3e4862;
                        font-weight: 300;

                        // border-right: 1px solid gray;
                        span{
                            // padding-right: 10px;
                        margin-right: 10px;
                        font-size: 14px;
                        }
                        
                        &>:hover{
                            text-decoration:underline;
                            font-weight: 400;
                            color: white;
                            
                        }
                    }
                }
            }
        }
        .msg{
            position: absolute;
            top: 50px;
            right: 35%;
            padding-top: 10px;
            overflow: hidden;
            img{
                width: 10px;
                height: 10px;
                margin-top:3px ;
            }
            a{
                // color: black;
                
               &>:hover{
                // font-weight: 400;
                color: white;
                text-decoration:underline;
               }
               span{
                color: #3e4862;
                   font-size: 10px;
                font-weight: 300;
               
                   border-right: 1px solid gray;
                   padding-right: 10px;
                   margin-right: 5px;
                   
               }
               .borderR{
                   border-right: 0;
               }
            }

        }
        .company{
            position: absolute;
            top: 70%;
            right: 35%;
            p{
                font-size: 10px;
                font-weight: 300;
                color: #3e4862;
            }
        }
    }
}